<template>
  <div class="main">
    <a-card :title="formTile + '工艺模版'">
      <template #extra>
        <a-button
          type="primary"
          style="margin-left:10px"
          @click="handleSubmit"
        >保存</a-button>
      </template>

      <div>
        <a-row
          type="flex"
          justify="start"
          align="top"
        >
          <a-col :span="24">
            <a-card>
              <a-form
                :form="form"
                @submit="handleSubmit"
                :labelCol="formItemLayout.labelCol"
                :wrapperCol="formItemLayout.wrapperCol"
              >
              <a-form-item label="模板名称">
                    <a-textarea
                      allow-clear
                      :rows="3"
                      placeholder="请输入内容"
                      v-decorator="[
                  `tempName`,
                  {
                    validateTrigger: ['change', 'blur'],
                   
                  }
                ]"
                    ></a-textarea>
                  </a-form-item>
                <a-form-item label="后道工序">
                  <a-textarea
                    allow-clear
                    :rows="3"
                    placeholder="请输入内容"
                    v-decorator="[
                  `beof`,
                  {
                    validateTrigger: ['change', 'blur'],
                   
                  }
                ]"
                  ></a-textarea>
                </a-form-item>
                <a-form-item label="面料正反面说明">
                  <a-textarea
                    allow-clear
                    :rows="3"
                    placeholder="请输入内容"
                    v-decorator="[
                  `fabricDesc`,
                  {
                    validateTrigger: ['change', 'blur'],
                   
                  }
                ]"
                  ></a-textarea>
                </a-form-item>
                <a-form-item label="纸样数量">
                  <a-textarea
                    allow-clear
                    :rows="3"
                    placeholder="请输入纸张数量"
                    v-decorator="[
                  `zyNum`,
                  {
                    validateTrigger: ['change', 'blur'],
                   
                  }
                ]"
                  ></a-textarea>
                </a-form-item>
                <a-form-item label="裁床注意">
                  <a-textarea
                    allow-clear
                    :rows="3"
                    placeholder="请输入内容"
                    v-decorator="[
                  `cutting`,
                  {
                    validateTrigger: ['change', 'blur'],
                  
                  }
                ]"
                  ></a-textarea>
                </a-form-item>
                <a-form-item label="工序流程">
                  <a-textarea
                    allow-clear
                    :rows="3"
                    placeholder="请输入内容"
                    v-decorator="[
                  `process`,
                  {
                    validateTrigger: ['change', 'blur'],
                   
                  }
                ]"
                  ></a-textarea>
                </a-form-item>
                <a-form-item label="特艺-排料/剪裁要求">
                  <a-textarea
                    allow-clear
                    :rows="3"
                    placeholder="请输入内容"
                    v-decorator="[
                  `tyReq`,
                  {
                    validateTrigger: ['change', 'blur'],
                   
                  }
                ]"
                  ></a-textarea>
                </a-form-item>
                <a-form-item label="特艺/特殊工序">
                  <a-textarea
                    allow-clear
                    :rows="3"
                    placeholder="请输入内容"
                    v-decorator="[
                  `tyProcess`,
                  {
                    validateTrigger: ['change', 'blur'],
                   
                  }
                ]"
                  ></a-textarea>
                </a-form-item>

                <a-form-item label="缝制工艺">
                  <a-textarea
                    allow-clear
                    :rows="3"
                    placeholder="请输入内容"
                    v-decorator="[
                  `commonReq`,
                  {
                    validateTrigger: ['change', 'blur'],
                   
                  }
                ]"
                  ></a-textarea>
                  <!-- rules: [
                      {
                        required: true,
                        whitespace: true,
                        message: '请输入特艺/特殊工艺'
                      }
                    ] -->
                </a-form-item>
                <a-form-item label="注意事项">
                  <a-textarea showCount allow-clear :rows="10" placeholder="请输入内容" v-decorator="[
                    `attention`,
                    {
                      validateTrigger: ['change', 'blur'],

                    }
                  ]"></a-textarea>

                </a-form-item>
                <a-row style="margin: 0 10% 0 12.6%;text-align:left">
                  <a-col :span="12">
                    <a-form-item label="纸样1">
                      经:
                      <a-input
                        allow-clear
                        style="width:40%"
                        placeholder="请输入内容"
                        v-decorator="[
                  `long1`,
                  {
                    validateTrigger: ['change', 'blur'],
                   
                  }
                ]"
                      />
                      纬:
                      <a-input
                        allow-clear
                        style="width:40%;"
                        placeholder="请输入内容"
                        v-decorator="[
                  `lat1`,
                  {
                    validateTrigger: ['change', 'blur'],
                   
                  }
                ]"
                      />
                    </a-form-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-item label="纸样2">
                      经:
                      <a-input
                        allow-clear
                        placeholder="请输入内容"
                        style="width:40%"
                        v-decorator="[
                  `long2`,
                  {
                    validateTrigger: ['change', 'blur'],
                   
                  }
                ]"
                      />
                      纬:
                      <a-input
                        allow-clear
                        style="width:40%;"
                        placeholder="请输入内容"
                        v-decorator="[
                  `lat2`,
                  {
                    validateTrigger: ['change', 'blur'],
                   
                  }
                ]"
                      />
                    </a-form-item>
                  </a-col>
                </a-row>
                <a-form-item
                  label="款式图"
                  help="只支持图片格式"
                  style="text-align:left"
                >
                  <a-upload
                    name="file"
                    list-type="picture-card"
                    :multiple="true"
                    class="avatar-uploader"
                    :data="{ type: 1 }"
                    :fileList="fileList"
                    @change="handleChange"
                    :action="uploadUrl"
                  >
                    <div>
                      <a-icon type="plus" />
                      <div class="ant-upload-text">
                        上传图片
                      </div>
                    </div>
                  </a-upload>

                </a-form-item>

              </a-form>
            </a-card>

          </a-col>
        </a-row>
      </div>
      <div v-if="id && !ifCopy">
        <a-tabs
          :default-active-key="0"
          v-model="current"
        >
        <a-tab-pane
            :key="0"
            tab="设置关联属性">
          </a-tab-pane>
          <a-tab-pane
            :tab="item.title"
            v-for="item in steps"
            :key="item.code"
          >
          </a-tab-pane>
          <a-tab-pane
            v-if="billList.brand == '校服'"
            :key="5"
            tab="校服校标"
          >
          </a-tab-pane>
          
        </a-tabs>
      </div>
      <div v-if="!this.id && !ifCopy">
        <a-tabs
          :default-active-key="0"
          v-model="current"
        >
        <a-tab-pane
            :key="0"
            tab="设置关联属性">
          </a-tab-pane>
        </a-tabs>
      </div>
      <a-card v-if="current==0 && !ifCopy">
          <a-table
                :columns="columnsBrand"
                :data-source="brands"
                :pagination="false"
              >
                <template
                  slot="brand"
                  slot-scope="txt, record"
                >
                  <span
                    v-for="item,index in record.brand"
                    :key="index"
                  >
                    <span
                      v-for="subitem,index in brandList"
                      :key="index"
                    >
                      <a-tag
                        color="blue"
                        v-if="item == subitem.code"
                      >{{subitem.name}}</a-tag>
                    </span>
                  </span>
                </template>
                <template
                  slot="xl"
                  slot-scope="txt, record"
                >
                  <span
                    v-for="item,index in record.xl"
                    :key="index"
                  >
                    <span
                      v-for="subitem,index in xlList"
                      :key="index"
                    >
                      <a-tag
                        color="cyan"
                        v-if="item == subitem.code"
                      >{{subitem.name}}</a-tag>
                    </span>
                  </span>
                </template>
                <template
                  slot="material"
                  slot-scope="txt, record"
                >
                  <span
                    v-for="item,index in record.material"
                    :key="index"
                  >
                    <span
                      v-for="subitem,index in materialList"
                      :key="index"
                    >
                      <a-tag
                        color="purple"
                        v-if="item == subitem.code"
                      >{{subitem.name}}</a-tag>
                    </span>
                  </span>
                </template>
                <template
                  slot="thick"
                  slot-scope="txt, record"
                >
                  <span
                    v-for="item,index in record.thick"
                    :key="index"
                  >
                    <span
                      v-for="subitem,index in thickList"
                      :key="index"
                    >
                      <a-tag
                        color="orange"
                        v-if="item == subitem.code"
                      >{{subitem.name}}</a-tag>
                    </span>
                  </span>
                </template>
                <template
                  slot="action"
                  slot-scope="txt, record,i"
                >
                  <a
                    class="mr-10"
                    @click="edit(record,i)"
                  >
                    <a-icon type="edit" />编辑
                  </a>
                  <a-popconfirm
                    :title="`确定要删除该项吗?`"
                    @confirm="deleteRecord(i)"
                  >
                    <a class="mr-10">
                      <a-icon type="delete" />删除
                    </a>
                  </a-popconfirm>
                </template>

              </a-table>
            <a-button
            type="dashed"
            style="width: 100%;margin-top: 20px;"
            @click="showMore"
          >
            <a-icon type="plus" />批量添加
          </a-button>
        </a-card>
      <div v-if="this.id && !ifCopy">
        <a-card v-if="current==1">
          <a-table
            :columns="columns5"
            :data-source="craftBillInterlining"
          >
            <template
              slot="action"
              slot-scope="txt, record"
            >
              <a
                class="mr-10"
                @click="tocraft(record)"
              >
                <a-icon type="edit" />编辑
              </a>
              <a-popconfirm
                :title="`确定要删除该项吗?`"
                @confirm="deleteCraft(record)"
              >
                <a class="mr-10">
                  <a-icon type="delete" />删除
                </a>
              </a-popconfirm>
            </template>

          </a-table>
          <a-button
            type="dashed"
            style="width: 100%;margin-top: 20px;"
            @click="tocraft('')"
          >
            <a-icon type="plus" />添加粘衬部位
          </a-button>

        </a-card>
        <a-card v-if="current==2">
          <a-table
            :columns="columns"
            :data-source="craftBillTemplate"
          >
            <template
              slot="description"
              slot-scope="text, record"
            >
              <a-textarea
                style="margin: -5px 0"
                :value="text"
                @blur="e => handleChangeinput(e.target.value, record.id)"
              >
              </a-textarea>

            </template>
            <template
              slot="action"
              slot-scope="txt, record"
            >
              <a-popconfirm
                :title="`确定要删除该项吗?`"
                @confirm="deleteRecord(record)"
              >
                <a class="mr-10">
                  <a-icon type="delete" />删除
                </a>
              </a-popconfirm>
            </template>

          </a-table>
          <a-button
            type="dashed"
            style="width: 100%;margin-top: 20px;"
            @click="addList('')"
          >
            <a-icon type="plus" />添加工艺
          </a-button>

        </a-card>
        <a-card v-if="current==3">
          <a-table
            :columns="columns2"
            :defaultExpandAllRows="true"
            :data-source="craftBillPart"
          >
            <template
              slot="imgurl"
              slot-scope="txt, record"
            >
              <img
                style="width:150px;height: 100px;object-fit: scale-down;"
                :src="record.imgurl"
                @click="prevImg(record.imgurl)"
                :alt="record.imgurl"
              >
            </template>
            <template
              slot="seq"
              slot-scope="text, record"
            >
              <a-input
                style="margin: -5px 0;width:100px"
                :value="text"
                type="number"
                class="inputRight"
                @blur="e =>changeSeq(e.target.value, record.id)"
              />

            </template>
            <template
              slot="description"
              slot-scope="text, record"
            >
              <a-textarea
                style="margin: -5px 0"
                :value="text"
                @blur="e =>changeinputPart(e.target.value, record.id)"
              >
              </a-textarea>
            </template>
            <template
              slot="action"
              slot-scope="txt, record"
            >
              <a-popconfirm
                :title="`确定要删除该项吗?`"
                @confirm="deletePart(record)"
              >
                <a class="mr-10">
                  <a-icon type="delete" />删除
                </a>
              </a-popconfirm>
            </template>

          </a-table>
          <a-button
            type="dashed"
            style="width: 50%;margin-top: 20px;"
            @click="toPart"
          >
            <a-icon type="plus" />添加部位
          </a-button>
          <a-button
            type="dashed"
            style="width: 50%;margin-top: 20px;"
            @click="addPart"
          >
            <a-icon type="plus" />选择部位
          </a-button>
        </a-card>
        <a-card v-if="current==4">
          <a-table
            :columns="columns3"
            :data-source="craftBillSpec"
          >
            <template
              slot="imgurl"
              slot-scope="txt, record"
            >
              <img
                style="height: 100px;object-fit: scale-down;"
                :src="record.imgurl"
                @click="prevImg(record.imgurl)"
                :alt="record.imgurl"
              >
            </template>
            <template
              slot="action"
              slot-scope="txt, record"
            >
              <a
                class="mr-10"
                @click="addSea(record)"
              >
                <a-icon type="edit" />编辑
              </a>
              <a-popconfirm
                :title="`确定要删除该项吗?`"
                @confirm="deleteSea(record)"
              >
                <a class="mr-10">
                  <a-icon type="delete" />删除
                </a>
              </a-popconfirm>
            </template>

          </a-table>
          <a-button
            type="dashed"
            style="width: 100%;margin-top: 20px;"
            @click="addSea('')"
          >
            <a-icon type="plus" />添加特艺
          </a-button>
        </a-card>
        <a-card v-if="current==5">
          <a-table
            :columns="columns4"
            :data-source="craftBillSchoolVos"
          >
            <template
              slot="imgurl"
              slot-scope="txt, record"
            >
              <img
                style="height: 100px;object-fit: scale-down;"
                :src="record.imgurl"
                @click="prevImg(record.imgurl)"
                :alt="record.imgurl"
              >
            </template>
            <template
              slot="action"
              slot-scope="txt, record"
            >
              <a
                class="mr-10"
                @click="addSchool(record)"
              >
                <a-icon type="edit" />编辑
              </a>
              <a-popconfirm
                :title="`确定要删除该项吗?`"
                @confirm="deleteSchool(record)"
              >
                <a class="mr-10">
                  <a-icon type="delete" />删除
                </a>
              </a-popconfirm>
            </template>

          </a-table>
          <a-button
            type="dashed"
            style="width: 100%;margin-top: 20px;"
            @click="addSchool('')"
          >
            <a-icon type="plus" />添加校服校标
          </a-button>

        </a-card>
      
      </div>
      <div class="steps-action">
        <a-button
          type="primary"
          @click="reset"
        >返回</a-button>
        <div>
        </div>
      </div>
      <templateList
        v-if="showTemplate"
        :billId="id"
        @close="close"
      ></templateList>
      <partList
        v-if="showPart"
        :billId="id"
        :maxSeq="maxSeq"
        :billList="billList"
        @closePart="closePart"
      ></partList>
      <bill
        v-if="showBill"
        :backList="backList"
        @closeBill="closeBill"
      ></bill>
      <tableList
        v-if="showTable"
        :brandCode="brandCode"
        :xlCode="xlCode"
        :tableType="tableType"
        @closeCopy="closeCopy"
      ></tableList>
      <seaList
        v-if="showSea"
        :billId="id"
        :seaDetail="seaDetail"
        @closeSea="closeSea"
      ></seaList>
      <schoolList
        v-if="showSchool"
        :billId="id"
        :schoolDetail="schoolDetail"
        @closeSchool="closeSchool"
      ></schoolList>
      <addPart
        v-if="toAddPart"
        :billId="id"
        :maxSeq="maxSeq"
        @closeAddPart="closeAddPart"
      ></addPart>
      <newPart
        v-if="showNewPart"
        :billId="id"
        :maxSeq="maxSeq"
        :billList="billList"
        @closeNewPart="closeNewPart"
      ></newPart>
      <craftBillInter
        v-if="showCraftBillInter"
        :craftDetail="craftDetail"
        :billId="id"
        @closecraft="closecraft"
      ></craftBillInter>
      <a-modal
        v-model="showBigImg"
        title="图片预览"
        @ok="showBigImg = false"
        :footer="null"
        width="60%"
        :mask="true"
      >
        <div class="previmg">
          <img :src="prevImageUrl" />
        </div>
      </a-modal>
      <a-modal
      v-model="visible"
      title="批量添加"
      width="70%"
      @ok="handleOk"
    >
      <a-form
        :form="form3"
        @submit="handleOk"
        :labelCol="formItemLayout.labelCol"
        :wrapperCol="formItemLayout.wrapperCol"
      >
        <a-form-item
          label="品牌"
          :required="true"
        >
          <a-checkbox
            :indeterminate="indeterminate"
            :checked="checkAll"
            @change="onCheckAllChange"
          >
            全选
          </a-checkbox>
          <a-checkbox-group
            style="width: 100%;"
            @change="onChange"
            v-model="brand"
          >
            <a-row>
              <a-col
                :span="6"
                v-for="item,index in brandList"
                :key="index"
              >
                <a-checkbox :value="item.code">
                  {{item.name}}
                </a-checkbox>
              </a-col>

            </a-row>
          </a-checkbox-group>
        </a-form-item>
        <a-form-item
          label="小类"
          :required="true"
        >
          <a-checkbox
            :indeterminate="indeterminate1"
            :checked="checkAll1"
            @change="onCheckAllChange1"
          >
            全选
          </a-checkbox>
          <a-checkbox-group
            style="width: 100%;"
            v-model="xl"
            @change="onChange1"
          >
            <a-row>
              <a-col
                :span="6"
                v-for="item,index in xlList"
                :key="index"
              >
                <a-checkbox :value="item.code">
                  {{item.name}}
                </a-checkbox>
              </a-col>

            </a-row>
          </a-checkbox-group>

        </a-form-item>
        <a-form-item
          label="材质"
          :required="true"
        >
          <a-checkbox
            :indeterminate="indeterminate2"
            :checked="checkAll2"
            @change="onCheckAllChange2"
          >
            全选
          </a-checkbox>
          <a-checkbox-group
            style="width: 100%;"
            v-model="material"
            @change="onChange2"
          >
            <a-row>
              <a-col
                :span="6"
                v-for="item,index in materialList"
                :key="index"
              >
                <a-checkbox :value="item.code">
                  {{item.name}}
                </a-checkbox>
              </a-col>

            </a-row>
          </a-checkbox-group>

        </a-form-item>
        <a-form-item
          label="厚薄"
          :required="true"
        >
          <a-checkbox
            :indeterminate="indeterminate3"
            :checked="checkAll3"
            @change="onCheckAllChange3"
          >
            全选
          </a-checkbox>
          <a-checkbox-group
            style="width: 100%;"
            v-model="thick"
            @change="onChange3"
          >
            <a-row>
              <a-col
                :span="6"
                v-for="item,index in thickList"
                :key="index"
              >
                <a-checkbox :value="item.code">
                  {{item.name}}
                </a-checkbox>
              </a-col>

            </a-row>
          </a-checkbox-group>

        </a-form-item>
      </a-form>
    </a-modal>
    </a-card>

  </div>
  <!-- </a-modal> -->

</template>

<script>
import {
  createList,
  updatelist,
  getBillList,
  getDetailList,
  getDictChildList,
  getBillTable,
  getInterliningList,
  deleteInterlining,
  getTemplateList,
  updateTemplate,
  deleteTemplate,
  getSpecList,
  deleteSpec,
  getPartList,
  updatePart,
  deletePart,
  getSchoolList,
  saveInterlining,
  saveTemplate,
  savePart,
  saveSpec,
  saveSchool,
  deleteSchool
} from '@api/rd/index'
import { uploadUrl } from '@api/rd/index.js'
import templateList from './template.vue'
import craftBillInter from './craftBillInter.vue'
import partList from './part.vue'
import seaList from './sea.vue'
import bill from './bill.vue'
import addPart from './addpart.vue'
import schoolList from './school.vue'
import tableList from './tableList.vue'
import newPart from './newPart.vue'
const columnsBrand = [
  {
    title: '品牌',
    scopedSlots: { customRender: 'brand' }
  },
  {
    title: '小类',
    scopedSlots: { customRender: 'xl' }
  },
  {
    title: '材质',
    scopedSlots: { customRender: 'material' }
  },
  {
    title: '厚薄',
    scopedSlots: { customRender: 'thick' }
  },
  {
    title: '操作',
    width: 160,
    scopedSlots: { customRender: 'action' }
  }
]
const columns = [
  {
    title: '描述',
    dataIndex: 'description',
    scopedSlots: { customRender: 'description' }
  },
  {
    title: '操作',
    width: 220,
    scopedSlots: { customRender: 'action' }
  }
]
const columns3 = [
  {
    title: '序号',
    dataIndex: 'seq'
  },
  {
    title: '特艺',
    dataIndex: 'specId'
  },
  {
    title: '销售色',
    dataIndex: 'styColorId'
  },
  {
    title: '跳码',
    dataIndex: 'jumpSize'
  },
  {
    title: '图片',
    scopedSlots: { customRender: 'imgurl' }
  },
  {
    title: '操作',
    width: 130,
    scopedSlots: { customRender: 'action' }
  }
]
const columns4 = [
  {
    title: '序号',
    dataIndex: 'seq'
  },
  {
    title: '销售色',
    dataIndex: 'styColorId'
  },
  {
    title: '描述',
    dataIndex: 'description'
  },
  {
    title: '图片',
    scopedSlots: { customRender: 'imgurl' }
  },
  {
    title: '操作',
    width: 100,
    scopedSlots: { customRender: 'action' }
  }
]
const columns2 = [
  {
    title: 'ID',
    dataIndex: 'id'
  },
  {
    title: '序号',
    dataIndex: 'seq',
    sorter: (a, b) => a.seq - b.seq,
    scopedSlots: { customRender: 'seq' }
  },
  {
    title: '工艺部位',
    width: 120,
    dataIndex: 'partName'
  },
  {
    title: '工艺做法',
    width: 120,
    dataIndex: 'operName'
  },
  {
    title: '图片',
    scopedSlots: { customRender: 'imgurl' }
  },
  {
    title: '描述',
    width: 300,
    dataIndex: 'description',
    scopedSlots: { customRender: 'description' }
  },
  {
    title: '操作',
    width: 100,
    scopedSlots: { customRender: 'action' }
  }
]
const columns5 = [
  {
    title: '编号',
    dataIndex: 'code'
  },
  {
    title: '压力',
    dataIndex: 'pressure'
  },
  {
    title: '温度',
    dataIndex: 'temperature'
  },
  {
    title: '时间',
    dataIndex: 'time'
  },
  {
    title: '部位',
    dataIndex: 'part'
  },
  {
    title: '操作',
    width: 220,
    scopedSlots: { customRender: 'action' }
  }
]
export default {
  components: {
    templateList,
    partList,
    seaList,
    bill,
    newPart,
    addPart,
    schoolList,
    tableList,
    craftBillInter
  },

  props: {
    content: {
      type: Object,
      default: null
    }
  },

  data() {
    return {
      id: '',
      columns,
      columns2,
      columns3,
      columns4,
      columns5,
      columnsBrand,
      craftBillSchoolVos: [],
      value: this.text,
      billNo: '',
      inputBillNo: '',
      backList: [],
      tableType: '',
      showBill: false,
      showTable: false,
      statusTime: '',
      prevImageUrl: '',
      showSchool: false,
      showBigImg: false,
      visible:false,
      craftDetail: {},
      seaDetail: {},
      schoolDetail: {},
      showCraftBillInter: false,
      statusUser: '',
      uploadUrl,
      loading: false,
      showTemplate: false,
      showPart: false,
      idEdit: false,
      craftBillTemplate: [],
      craftBillSpec: [],
      fileList: [],
      stycolor: [],
      brands: [],
      brand:[],
      thick:[],
      xl:[],
      material:[],
      indeterminate: true,
      checkAll: false,
      indeterminate1: true,
      indeterminate2: true,
      indeterminate3: true,
      checkAll1: false,
      checkAll2: false,
      checkAll3: false,
      brandList:[],
      xlList: [],
      material: [],
      materialList: [],
      thick: [],
      thickList: [],
      disabled: false,
      showSea: false,
      firstForm: {},
      nextForm: {},
      continue: true,
      maxSeq: 0,
      toAddPart: false,
      showNewPart: false,
      gettime: '',
      fileds: [],
      colorList: [],
      codeList: [],
      billList: {},
      finalForm: {},
      brandCode: '',
      xlCode: '',
      copyid:'',
      craftBillPart: [],
      ifCopy: false,
      craftBillInterlining: [],
      imageUrl: '',
      form: this.$form.createForm(this),
      form3: this.$form.createForm(this),
      type:'',
      current: 0,
      editingKey: '',
      editKey: '',
      nonError: true,
      steps: [
        { code: 1, title: '粘衬部位' },
        { code: 2, title: '统一工艺' },
        { code: 3, title: '部位信息' },
        { code: 4, title: '特艺确认' }
      ],
      formItemLayout: {
        labelCol: {
          xl: { span: 5 }
        },
        wrapperCol: {
          xl: { span: 15 }
        }
      }
    }
  },
  computed: {
    userInfo() {
      return this.$store.getters.userInfo || null
    }
  },
  created() {
    const id = this.$route.query.id
    this.type = this.$route.query.type
    if(this.type){
        this.ifCopy = true
        this.copyid = this.$route.query.id
      }
    if (id) {
      this.formTile = '编辑'
      this.id = id
      this.$nextTick(() => {
        this.getDetail()
      })
      this.idEdit = true
    } else {
      this.formTile = '新增'
      setTimeout(() => {
        this.form.setFieldsValue(
          {
            cutting: '核对样衣后裁剪、核对样板片数；排版避免色差与边中色差、拉布留意面料纬斜法一致，丝缕归直；摊布松度适宜，不可打刀眼、钻孔。'
          },
          200
        )
      })
      // this.add()
    }
    this.getBrandList()
    this.getXlList()
    this.getMList()
    this.getTList()
    setInterval(this.getTime, 500)
  },
  methods: {
    getTime() {
      var _this = this
      let yy = new Date().getFullYear()
      var mm = new Date().getMonth() < 9 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1
      var dd = new Date().getDate() < 10 ? '0' + new Date().getDate() : new Date().getDate()
      let hh = new Date().getHours()
      let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes()
      let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds()
      _this.gettime = yy + '-' + mm + '-' + dd + ' ' + hh + ':' + mf + ':' + ss
    },
    async getInterliningList() {
      const params = {
        id: this.ifCopy?this.copyid:this.id
      }
      try {
        const res = await getInterliningList('bill', params)
        if (res.code == 200) {
          this.craftBillInterlining = res.data
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
          } else {
            this.$message.error('获取粘衬清单失败！')
          }
        }
      } catch (error) {
        this.$message.error('获取粘衬清单失败！')
      }
    },
    async getTemplateList() {
      const params = {
        id: this.ifCopy?this.copyid:this.id
      }
      try {
        const res = await getTemplateList('bill', params)
        if (res.code == 200) {
          this.craftBillTemplate = res.data
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
          } else {
            this.$message.error('获取统一工艺列表失败！')
          }
        }
      } catch (error) {
        this.$message.error('获取统一工艺列表失败')
      }
    },
    async getPartList() {
      const params = {
        id: this.ifCopy?this.copyid:this.id
      }
      try {
        const res = await getPartList('bill', params)
        if (res.code == 200) {
          this.craftBillPart = res.data
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
          } else {
            this.$message.error('获取部位列表失败！')
          }
        }
      } catch (error) {
        this.$message.error('获取部位列表失败！')
      }
    },
    async getSpecList() {
      const params = {
        id: this.ifCopy?this.copyid:this.id
      }
      try {
        const res = await getSpecList('bill', params)
        if (res.code == 200) {
          this.craftBillSpec = res.data
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
          } else {
            this.$message.error('获取特艺列表失败！')
          }
        }
      } catch (error) {
        this.$message.error('获取特艺列表失败！')
      }
    },
    async getSchoolList() {
      const params = {
        id: this.ifCopy?this.copyid:this.id
      }
      try {
        const res = await getSchoolList('bill', params)
        if (res.code == 200) {
          this.craftBillSchoolVos = res.data
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
          } else {
            this.$message.error('获取校服校标列表失败！')
          }
        }
      } catch (error) {
        this.$message.error('获取校服校标失败！')
      }
    },
    async getBrandList() {
      const params = {
        name: 'BRAND'
      }
      try {
        const res = await getDictChildList('dict', params)
        if (res.code == 200) {
          this.brandList = res.data
        } else {
          this.$message.error(res.msg)
        }
      } catch (error) {
        this.$message.error('获取品牌列表失败！')
      }
    },

    async getXlList() {
      const params = {
        name: 'XL'
      }
      try {
        const res = await getDictChildList('dict', params)
        if (res.code == 200) {
          this.xlList = res.data
        } else {
          this.$message.error(res.msg)
        }
      } catch (error) {
        this.$message.error('获取小类列表失败！')
      }
    },
    async getMList() {
      const params = {
        name: 'GY_MATERIAL'
      }
      try {
        const res = await getDictChildList('dict', params)
        if (res.code == 200) {
          this.materialList = res.data
        } else {
          this.$message.error(res.msg)
        }
      } catch (error) {
        this.$message.error('获取小类列表失败！')
      }
    },
    async getTList() {
      const params = {
        name: 'GY_THICK'
      }
      try {
        const res = await getDictChildList('dict', params)
        if (res.code == 200) {
          this.thickList = res.data
        } else {
          this.$message.error(res.msg)
        }
      } catch (error) {
        this.$message.error('获取小类列表失败！')
      }
    },
    deleteRecord(i) {
      this.brands = this.brands.filter((item, index) => index != i)
    },
    handleOk(e) {
      e.preventDefault()
      if (!this.xl.length) {
        this.$message.error('请选择小类！')
      } else if (!this.brand.length) {
        this.$message.error('请选择品牌！')
      } else {
        this.submit3()
      }
    },
    submit3() {
      if (this.index || this.index === 0) {
        const obj = {
          groupId: null,
          brand: this.brand,
          xl: this.xl,
          material: this.material,
          thick: this.thick
        }
        this.$set(this.brands, this.index, obj)
        this.visible = false
      } else {
        const obj = {
          groupId: null,
          brand: this.brand,
          xl: this.xl,
          material: this.material,
          thick: this.thick
        }
        this.brands.push(obj)
        this.visible = false
      }
    },
    showMore() {
      this.visible = true
      this.brand = []
      this.xl = []
      this.material = []
      this.thick = []
      this.index = ''
    },
    edit(record, i) {
      this.visible = true
      this.brand = record.brand
      this.xl = record.xl
      this.material = record.material
      this.thick = record.thick
      this.index = i
    },
    onChange(checkedList) {
      this.indeterminate = !!checkedList.length && checkedList.length < this.brandList.length
      this.checkAll = checkedList.length === this.brandList.length
    },
    onCheckAllChange(e) {
      const arr = []
      this.brandList.map(item => {
        arr.push(item.id)
      })
      this.brand = e.target.checked ? arr : []
      this.indeterminate = false
      this.checkAll = e.target.checked
    },
    onChange1(checkedList) {
      this.indeterminate1 = !!checkedList.length && checkedList.length < this.xlList.length
      this.checkAll1 = checkedList.length === this.xlList.length
    },
    onCheckAllChange1(e) {
      const arr = []
      this.xlList.map(item => {
        arr.push(item.id)
      })
      this.xl = e.target.checked ? arr : []
      this.indeterminate1 = false
      this.checkAll1 = e.target.checked
    },
    onChange2(checkedList) {
      this.indeterminate2 = !!checkedList.length && checkedList.length < this.materialList.length
      this.checkAll2 = checkedList.length === this.materialList.length
    },
    onCheckAllChange2(e) {
      const arr = []
      this.materialList.map(item => {
        arr.push(item.id)
      })
      this.material = e.target.checked ? arr : []
      this.indeterminate2 = false
      this.checkAll2 = e.target.checked
    },
    onChange3(checkedList) {
      this.indeterminate3 = !!checkedList.length && checkedList.length < this.thickList.length
      this.checkAll3 = checkedList.length === this.thickList.length
    },
    onCheckAllChange3(e) {
      const arr = []
      this.thickList.map(item => {
        arr.push(item.id)
      })
      this.thick = e.target.checked ? arr : []
      this.indeterminate3 = false
      this.checkAll3 = e.target.checked
    },
    prevImg(url) {
      this.prevImageUrl = url
      this.showBigImg = true
    },
    reset() {
      this.form.resetFields()
      this.$router.push(`/rd/billTemplate`)
    },
    async deleteRecord(record) {
      const params = {
        id: record.id
      }
      const { realname } = this.userInfo
      params.operator = realname
      try {
        const res = await deleteTemplate('bill', params)
        if (res.code == 200) {
          this.$message.success('删除工艺成功！')
          this.getTemplateList()
        } else {
          this.$message.error(res.msg)
        }
      } catch (error) {
        this.$message.error('删除失败！')
      }
    },
    async deletePart(record) {
      const params = {
        id: record.id
      }
      const { realname } = this.userInfo
      params.operator = realname
      try {
        const res = await deletePart('bill', params)
        if (res.code == 200) {
          this.$message.success('删除部位成功！')
          this.getPartList()
        } else {
          this.$message.error(res.msg)
        }
      } catch (error) {
        this.$message.error('删除失败！')
      }
    },
    async deleteSea(record) {
      const params = {
        id: record.id
      }
      const { realname } = this.userInfo
      params.operator = realname
      try {
        const res = await deleteSpec('bill', params)
        if (res.code == 200) {
          this.$message.success('删除特艺成功！')
          this.getSpecList()
        } else {
          this.$message.error(res.msg)
        }
      } catch (error) {
        this.$message.error('删除失败！')
      }
    },
    async deleteSchool(record) {
      const params = {
        id: record.id
      }
      const { realname } = this.userInfo
      params.operator = realname
      try {
        const res = await deleteSchool('bill', params)
        if (res.code == 200) {
          this.$message.success('删除校服校标成功！')
          this.getSchoolList()
        } else {
          this.$message.error(res.msg)
        }
      } catch (error) {
        this.$message.error('删除失败！')
      }
    },
    handleChange(info, item, index) {
      let fileList = [...info.fileList]
      this.fileList = [...fileList]
      if (info.file.status === 'uploading') {
        return
      }
      if (info.file.status === 'done') {
        let list = fileList.map(file => {
          if (file.response) {
            file.url = file.response.data.url
          }
          return file
        })
        this.fileList = list.slice(-1)
      }
      if (info.file.status === 'error') {
        this.$message.error('图片上传失败')
      }
    },
    addList() {
      this.showTemplate = true
    },
    addPart() {
      this.showPart = true
      const list = []
      if (this.craftBillPart.length) {
        this.craftBillPart.map(item => {
          list.push(item.seq)
        })
        this.maxSeq = Math.max.apply(null, list)
      }
    },
    addSea(record) {
      this.showSea = true
      this.seaDetail = record
    },
    addSchool(record) {
      this.showSchool = true
      this.schoolDetail = record
    },
    toPart() {
      this.toAddPart = true
      const list = []
      if (this.craftBillPart.length) {
        this.craftBillPart.map(item => {
          list.push(item.seq)
        })
        this.maxSeq = Math.max.apply(null, list)
      }
    },
    toNewPart() {
      this.showNewPart = true
    },
    closeAddPart() {
      this.toAddPart = false
      this.getPartList()
    },
    closeNewPart() {
      this.showNewPart = false
      this.getPartList()
    },
    tocraft(record) {
      this.showCraftBillInter = true
      this.craftDetail = record
    },
    closecraft() {
      this.showCraftBillInter = false
      this.getInterliningList()
    },
    async deleteCraft(record) {
      const params = {
        id: record.id
      }
      const { realname } = this.userInfo
      params.operator = realname
      try {
        const res = await deleteInterlining('bill', params)
        if (res.code == 200) {
          this.$message.success('删除粘衬部位成功！')
          this.getInterliningList()
        } else {
          this.$message.error(res.msg)
        }
      } catch (error) {
        this.$message.error('删除失败！')
      }
    },
    close() {
      this.showTemplate = false
      this.getTemplateList()
    },
    closePart() {
      this.showPart = false
      this.getPartList()
    },
    closeBill(values) {
      this.showBill = false
      if (values == 1) {
        this.billNo = ''
        this.inputBillNo = ''
        this.disabled = false
      } else {
        this.billList = values[0]
        this.billNo = this.billList.billNo
        if (values[0].stycolorid) {
          this.stycolor = values[0].stycolorid.split(',')
        }
        // this.getBillTable()
      }
    },
    toCopy(num) {
      if (num == 1) {
        this.tableType = 'N'
      } else {
        this.tableType = 'Y'
      }
      this.xlCode = this.billList.xlCode
      this.brandCode = this.billList.brandCode
      this.showTable = true
    },
    closeCopy(id) {
      this.showTable = false
      if (id) {
        this.copyid = id
        this.ifCopy = true
        this.getDetail(1)
      }
    },
    closeSea() {
      this.showSea = false
      this.getSpecList()
    },
    closeSchool() {
      this.showSchool = false
      this.getSchoolList()
    },
    async handleChangeinput(value, key) {
      const newData = [...this.craftBillTemplate]
      const target = newData.find(item => key === item.id)
      if (target) {
        target.description = value
      }
      const params = target
      const { realname } = this.userInfo
      params.operator = realname
      try {
        const res = await updateTemplate('bill', params)
        if (res.code == 200) {
          this.getTemplateList()
        } else {
          this.$message.error(res.msg)
        }
      } catch (error) {
        this.$message.error('编辑失败！')
      }
    },
    async changeinputPart(value, key) {
      const newData = [...this.craftBillPart]
      const target = newData.find(item => key === item.id)
      if (target) {
        target.description = value
      }
      const params = target
      const { realname } = this.userInfo
      params.operator = realname
      try {
        const res = await updatePart('bill', params)
        if (res.code == 200) {
          this.getPartList()
        } else {
          this.$message.error(res.msg)
        }
      } catch (error) {
        this.$message.error('编辑失败！')
      }
    },
    async changeSeq(value, key) {
      const newData = [...this.craftBillPart]
      const target = newData.find(item => key === item.id)
      if (target) {
        target.seq = value
      }
      const params = target
      const { realname } = this.userInfo
      params.operator = realname
      try {
        const res = await updatePart('bill', params)
        if (res.code == 200) {
          this.getPartList()
        } else {
          this.$message.error(res.msg)
        }
      } catch (error) {
        this.$message.error('编辑失败！')
      }
    },
    async getDetail(num) {
      const params = {
        id: num?this.copyid:this.id
      }
      try {
        const res = await getDetailList('bill', params)
        if (res.code == 200) {
          const detail = res.data
          this.fileList = []
          this.form.setFieldsValue({
            tempName:detail.tempName,
            beof: detail.beof,
            fabricDesc: detail.fabricDesc,
            zyNum: detail.zyNum,
            attention:detail.attention,
            process: detail.process,
            interlining: detail.interlining,
            tyReq: detail.tyReq,
            tyProcess: detail.tyProcess,
            commonReq: detail.commonReq,
            long1: detail.long1,
            lat1: detail.lat1,
            long2: detail.long2,
            lat2: detail.lat2
          })
          this.form.setFieldsValue({
            cutting: detail.cutting ? detail.cutting : '核对样衣后裁剪、核对样板片数；排版避免色差与边中色差、拉布留意面料纬斜法一致，丝缕归直；摊布松度适宜，不可打刀眼、钻孔。'
          })
          if (detail.styleImg) {
            const obj = {
              name: 'pic.png',
              uid: detail.styleImg,
              status: 'done',
              url: detail.styleImg
            }
            this.fileList.push(obj)
          }
          if(detail.craftBillRelationVos.length){
            this.brands =detail.craftBillRelationVos
          }
           
          this.getInterliningList()
          this.getTemplateList()
          this.getPartList()
          this.getSpecList()
          this.getSchoolList()
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
          } else {
            this.$message.error('获取工艺模版详情失败！')
          }
        }
      } catch (error) {
        this.$message.error('获取工艺模版详情失败！')
      }
    },
    handleSubmit(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
          if (!err) {
            this.firstForm = values
              this.submit()
          }
      })
    },
    async submit() {
      var params = this.firstForm
      params.isTemp = 'Y'
      if (this.nonError) {
        const { realname } = this.userInfo
        params.operator = realname
        if (this.fileList.length) {
          params.styleImg = this.fileList[0].url
        }
        if (this.id && !this.type) {
          params.id = this.id
        }
      params.craftBillRelationGroup = this.brands
        try {
          const res = this.idEdit ? await updatelist('bill', params) : await createList('bill', params)
          if (res.code == 200) {
            this.$message.success(this.idEdit ? '修改工艺模板成功！' : '新建工艺模板成功！')
            if (!this.idEdit && res.data != {}) {
              this.id = res.data
              this.getDetail()
            }
            if (!this.idEdit && !this.ifCopy) {
              this.getInterliningList()
            }
            this.$nextTick(() => {
              if (this.ifCopy && this.id) {
                this.ifCopy = false
                this.submitCraft()
                this.submitTemplate()
                this.submitPart()
                this.submitSea()
                if (this.billList.brand == '校服') {
                  this.submitSchool
                }
              }
            })
            this.idEdit = true
            // this.reset()
          } else {
            this.$message.warning(res.msg)
          }
        } catch (error) {
          this.$message.warning('操作失败！')
        } finally {
          this.loading = false
        }
      }
    },
    async submitCraft() {
      const { realname } = this.userInfo
      this.craftBillInterlining.map(item => {
        item.billId = this.id
        item.operator = realname
      })
      try {
        const res = await saveInterlining('bill', this.craftBillInterlining)
        if (res.code != 200) {
          this.$message.warning(res.msg)
        }
      } catch (error) {
        this.$message.warning('操作失败！')
      }
    },
    async submitTemplate() {
      const { realname } = this.userInfo
      this.craftBillTemplate.map((item, i) => {
        item.billId = this.id
        item.operator = realname
      })
      try {
        const res = await saveTemplate('bill', this.craftBillTemplate)
        if (res.code != 200) {
          this.$message.warning(res.msg)
        }
      } catch (error) {
        this.$message.warning('操作失败！')
      }
    },
    async submitPart() {
      console.log(this.craftBillPart);
      const { realname } = this.userInfo
      this.craftBillPart.map((item, i) => {
        item.billId = this.id
        item.operator = realname
      })
      try {
        const res = await savePart('bill', this.craftBillPart)
        if (res.code != 200) {
          this.$message.warning(res.msg)
        }
      } catch (error) {
        this.$message.warning('操作失败！')
      }
    },
    async submitSea() {
      const { realname } = this.userInfo
      this.craftBillSpec.map((item, i) => {
        item.billId = this.id
        item.operator = realname
      })
      try {
        const res = await saveSpec('bill', this.craftBillSpec)
        if (res.code != 200) {
          this.$message.warning(res.msg)
        }
      } catch (error) {
        this.$message.warning('操作失败！')
      }
    },
    async submitSchool() {
      const { realname } = this.userInfo
      this.craftBillSchoolVos.map((item, i) => {
        item.billId = this.id
        item.operator = realname
      })
      try {
        const res = await saveSchool('bill', this.craftBillSchoolVos)
        if (res.code != 200) {
          this.$message.warning(res.msg)
        }
      } catch (error) {
        this.$message.warning('操作失败！')
      }
    }
  }
}
</script>

<style scoped lang="less">
.info-action {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  // margin-bottom: 20px;
}
.ml-20 {
  margin-left: 20px;
}
.steps-content {
  margin-top: 16px;
  min-height: 200px;
  text-align: center;
  padding-top: 50px;
}
.steps-action {
  display: flex;
  justify-content: space-between;
  margin-top: 24px;
}
.ant-upload-picture-card-wrapper {
  width: 20%;
}
.ant-upload-picture-card-wrapper[data-v-7206a2ce] {
  width: 100%;
}
.dynamic-delete-button {
  cursor: pointer;
  font-size: 24px;
  color: #999;
  margin: 50px 5px;
  transition: all 0.3s;
}
.dynamic-delete-button:hover {
  color: #777;
}
.dynamic-delete-button[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}
.ant-upload-picture-card-wrapper[data-v-f7c29e7e] {
  width: 95%;
}
.steps-content[data-v-f7c29e7e] {
  padding-top: 20px;
}
.previmg {
  display: flex !important;
  justify-content: center;
  align-items: center;
}
.previmg img {
  width: 500px;
}
.dynamic-delete-button2 {
  cursor: pointer;
  font-size: 24px;
  color: #999;
  /* margin: 50px 5px; */
  top: -92px;
  left: 380px;
  position: relative;
}
.dynamic-delete-button2:hover {
  color: #777;
}
.dynamic-delete-button2[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}
</style>
<style>
.inputRight input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}
.inputRight input[type='number'] {
  -moz-appearance: textfield;
}
</style>